<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/echarts/theme/dark.css">
  <style>
    body {
      background-color: #1e1e1e;
      color: #fff;
    }

    #main {
      width: 900px;
      height: 900px;
      margin: 50px auto;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    }
  </style>
</head>

<body>
<div id="main"></div>
<script>
  var myChart = echarts.init(document.getElementById('main'), 'dark');

  var option = {
    title: {
      text: '极致复杂 Echarts 示例',
      left: 'center',
      top: 40,
      textStyle: {
        color: '#f0c674',
        fontSize: 32,
        fontWeight: 'bold'
      }
    },
    tooltip: {
      trigger: 'axis',
      formatter: function (params) {
        var res = '<div style="font-size:18px;color:#fff;">' + params[0].name + '</div>';
        params.forEach(function (item) {
          res += '<div style="margin-top:10px;">' + item.seriesName + ': <span style="color:' + item.color + ';">' + item.value + '</span></div>';
        });
        return res;
      }
    },
    legend: {
      orient: 'vertical',
      right: 80,
      top: 'middle',
      textStyle: {
        color: '#999'
      },
      data: ['系列 1（折线图）', '系列 2（柱状图）', '系列 3（面积图）', '系列 4（散点图）', '系列 5（饼图）']
    },
    grid: [
      {
        left: '8%',
        right: '8%',
        bottom: '18%',
        containLabel: true
      },
      {
        left: '60%',
        right: '8%',
        top: '20%',
        bottom: '20%',
        containLabel: true
      }
    ],
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        axisLine: {
          lineStyle: {
            color: '#f0c674',
            width: 2
          }
        },
        axisLabel: {
          color: '#999',
          fontSize: 16,
          rotate: 30
        }
      },
      {
        type: 'category',
        gridIndex: 1,
        data: ['类别 A', '类别 B', '类别 C', '类别 D', '类别 E']
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#f0c674',
            width: 2
          }
        },
        axisLabel: {
          color: '#999',
          fontSize: 16
        },
        splitLine: {
          lineStyle: {
            color: '#333'
          }
        }
      },
      {
        type: 'value',
        gridIndex: 1,
        axisLine: {
          lineStyle: {
            color: '#f0c674',
            width: 2
          }
        },
        axisLabel: {
          color: '#999',
          fontSize: 16
        },
        splitLine: {
          lineStyle: {
            color: '#333'
          }
        }
      }
    ],
    series: [
      {
        name: '系列 1（折线图）',
        type: 'line',
        data: [120, 150, 130, 160, 140, 170, 155],
        itemStyle: {
          color: '#87cefa',
          borderWidth: 3
        },
        lineStyle: {
          width: 4
        },
        gridIndex: 0
      },
      {
        name: '系列 2（柱状图）',
        type: 'bar',
        data: [80, 90, 100, 110, 120, 130, 140],
        barWidth: '40%',
        itemStyle: {
          color: '#ffd700',
          opacity: 0.8
        },
        gridIndex: 0
      },
      {
        name: '系列 3（面积图）',
        type: 'line',
        stack: '总量',
        areaStyle: {
          opacity: 0.5,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#ffa07a'
            },
            {
              offset: 1,
              color: '#ff8c00'
            }
          ])
        },
        data: [70, 80, 90, 100, 110, 120, 130],
        gridIndex: 0
      },
      {
        name: '系列 4（散点图）',
        type: 'scatter',
        data: [
          [1, 85],
          [2, 95],
          [3, 105],
          [4, 115],
          [5, 125],
          [6, 135],
          [7, 145]
        ],
        symbolSize: 15,
        itemStyle: {
          color: '#9370db'
        },
        gridIndex: 0
      },
      {
        name: '系列 5（饼图）',
        type: 'pie',
        radius: ['40%', '60%'],
        center: ['70%', '50%'],
        data: [
          { value: 100, name: 'A 部分' },
          { value: 150, name: 'B 部分' },
          { value: 80, name: 'C 部分' },
          { value: 120, name: 'D 部分' },
          { value: 90, name: 'E 部分' }
        ],
        label: {
          show: true,
          formatter: '{b}: {c} ({d}%)'
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 2
        }
      }
    ],
    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: 100
      },
      {
        type: 'slider',
        show: true,
        y: 'bottom',
        start: 0,
        end: 100
      }
    ],
    animationDuration: 2500,
    animationEasing: 'cubicInOut'
  };

  myChart.setOption(option);

  // 添加交互事件
  myChart.on('click', function (params) {
    if (params.componentType === 'series') {
      var seriesName = params.seriesName;
      var dataValue = params.value;
      var message = '你点击了系列：' + seriesName + '，数据值为：' + dataValue;
      alert(message);
    }
  });
</script>
</body>

</html>